<template>
  <div class="flex flex-column height">
    <header-top
      :TxtHeader="TxtHeader"
      @leftClick="back"
      @rightClick="rightClick"
    ></header-top>
    <div class="content_main">
      <div class="enter flex justify-content-between align-items">
        <div class="enter-item">
          <div class="enter-title">快速问诊</div>
          <div class="enter-alias">一对一服务，1分钟响应</div>
        </div>
        <div class="enter-item">
          <div class="enter-title">好药快递</div>
          <div class="enter-alias">30分钟送到，24小时服务</div>
        </div>
      </div>
      <div class="icon-list">
        <div>
          <van-image
            round
            width="50px"
            height="50px"
            src="@/assets/index/yk_icon.png"
          ></van-image>
          <div class="icon-text">家庭医生</div>
        </div>
        <div>
          <van-image round width="50px" height="50px" src></van-image>
          <div class="icon-text">预约挂号</div>
        </div>
        <div>
          <van-image round width="50px" height="50px" src></van-image>
          <div class="icon-text">互联网医院</div>
        </div>
        <div>
          <van-image round width="50px" height="50px" src></van-image>
          <div class="icon-text">健康档案</div>
        </div>
      </div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>1</van-swipe-item>
        <van-swipe-item>2</van-swipe-item>
      </van-swipe>
      <div class="doctor">
        <div
          class="title_top flex justify-content-between align-items"
          style="padding-left: 25px"
        >
          <h3>严选医生</h3>
        </div>
        <div class="doctor_list">
          <van-sticky>
            <van-dropdown-menu>
              <van-dropdown-item
                v-model="wholeCountry"
                :options="wholeCountryList"
                @open="openScrollFn"
                @closed="closedFn"
              />
              <van-dropdown-item
                ref="department"
                :title="department ? department : '科室'"
                @open="openScrollFn"
                @closed="closedFn"
              >
                <van-tree-select
                  :items="departmentList"
                  :active-id.sync="activeId"
                  :main-active-index.sync="activeIndex"
                  @click-item="itemFn"
                />
              </van-dropdown-item>
              <van-dropdown-item
                v-model="sort"
                @open="openScrollFn"
                :options="sortList"
                @closed="closedFn"
              />
            </van-dropdown-menu>
          </van-sticky>
          <div :style="{ height: height - 100 + 'px', 'overflow-y': 'auto' }">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
              :offset="10"
              class="list"
            >
              <div v-if="listData.length">
                <list
                  v-for="(item, index) in listData"
                  :key="index"
                  :dataItem="item"
                ></list>
              </div>
            </van-list>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderTop from "@/components/header-top";
import List from "@/components/list";
import { Image as VanImage, Swipe, SwipeItem } from "vant";
const itemData = {
  id: new Date().getTime(),
  url: require("@/assets/index/index_bg.png"),
  name: "李耀光",
  department: "口腔科",
  type: "主任医生",
  lv: "三甲",
  hospital: "广慈太保互联网医院",
  begoodat:
    "擅长中西医治疗、牙周炎、智齿、牙髓炎、牙周病、口腔溃疡、阻生齿、牙体病",
  sell: [
    {
      name: "图文",
      price: 88
    },
    {
      name: "视频",
      price: 100
    }
  ]
};

export default {
  components: {
    HeaderTop,
    List,
    [VanImage.name]: VanImage,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem
  },
  data() {
    return {
      TxtHeader: {
        //头部设置
        background: "#bbb", //头部背景颜色
        color: "#000000", //头部中间文字颜色
        title: "",
        leftOpt: {
          //左边按钮设置
          icon: "location",
          text: "",
          color: "#000000"
        },
        rightOpt: {
          //左边按钮设置
          icon: "envelop-o",
          text: "",
          color: "#000000"
        }
      },
      loading: false,
      finished: false,
      page: 1,
      size: 10,
      listData: [],
      height: 0,
      wholeCountry: "0",
      department: "",
      sort: "0",
      activeId: "",
      activeIndex: 0,
      wholeCountryList: [
        {
          text: "全国",
          value: "0"
        }
      ],
      departmentList: [
        {
          text: "口腔科",
          children: [
            {
              text: "齿科",
              id: 1
            }
          ]
        },
        {
          text: "脑科",
          children: [
            {
              text: "左脑科",
              id: 2
            },
            {
              text: "又脑科",
              id: 3
            }
          ]
        }
      ],
      sortList: [
        {
          text: "默认排序",
          value: "0"
        }
      ]
    };
  },
  mounted() {
    this.height = window.innerHeight;
  },
  methods: {
    back() {
      console.log("定位");
    },
    rightClick() {
      console.log("消息");
    },
    onLoad() {
      this.loading = true;
      setTimeout(() => {
        for (let i = 0; i < 5; i++) {
          this.listData.push(itemData);
        }
        this.loading = false;
      }, 3000);
    },
    closedFn() {
      console.log(this.wholeCountry, this.department, this.sort);
    },
    openScrollFn() {
      this.$nextTick(() => {
        var container = this.$el.querySelector(".content_main");
        container.scrollTop = container.scrollHeight;
      });
    },
    itemFn(val) {
      this.department = val.text;
      this.$refs.department.toggle();
    }
  }
};
</script>
<style scoped>
.content_main {
  height: calc(100% - 1rem);
  overflow-y: auto;
  background: #fff;
  line-height: 20px;
}

.enter {
  height: 85px;
  padding: 0 20px;
  margin-top: 8px;
}

.enter-item {
  width: 161px;
  height: 85px;
  border-radius: 5px 5px 5px 5px;
  text-align: center;
  border: 1px solid rgba(187, 187, 187, 100);
}

.enter-title {
  text-align: start;
  font-size: 16px;
  margin-top: 12px;
  margin-left: 13px;
}

.enter-alias {
  text-align: start;
  font-size: 12px;
  margin-left: 13px;
}

.icon-list {
  display: flex;
  margin-top: 12px;
  padding: 0 25px;
  justify-content: space-between;
}
.icon-text {
  column-rule: #000;
}
.my-swipe {
  margin: 13px 20px;
  width: 333px;
  height: 74px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 16px;
  line-height: 74px;
  text-align: center;
  background-color: #39a9ed;
}
</style>
<style lang="less" scoped>
.doctor_list {
  background: #fff;
  .list {
    margin: 0 0.11rem 0 0.14rem;
  }
}
</style>
